<template>
  <view class="button-group-container">
    <view class="group-header">
      <view class="account-and-value-item">
        <view class="account-item">
          <svg-icon :icon="$store.state.account.icon" :width="20" :height="20" background="#ddd" :box-width="20" :box-height="20" fill-color="white" />
          <span class="account-chooser" @click="chooseAccount">
          {{$store.state.account.accountInfo.name}}
          </span>
        </view>
        <span class="value-item"> {{value}} </span>
      </view>
      <view class="comment-item">

        <view class="comment-input-box">
          <span>备注:</span>
          <view class="comment-input" contenteditable="true" placeholder="点击填写备注" v-model="remark">

          </view>
        </view>
        <view class="comment-icon">
          <view>
            <svg-icon icon="图片" :width="20" :height="20" background="#eee" fill-color="white" />
          </view>
          <view>
            <svg-icon icon="标签" :width="20" :height="20" background="#eee" fill-color="white" />
          </view>
        </view>
      </view>

      <view class="calculator-container">
        <ul>
          <li @click="choose('7')">7</li>
          <li  @click="choose('8')">8</li>
          <li @click="choose('9')">9</li>
          <li @click="today">今天</li>
          <li @click="choose('4')">4</li>
          <li @click="choose('5')">5</li>
          <li @click="choose('6')">6</li>
          <li class="big" @click="choose('+')">+</li>
          <li @click="choose('1')">1</li>
          <li @click="choose('2')">2</li>
          <li @click="choose('3')">3</li>
          <li class="big" @click="choose('-')">-</li>
          <li class="big" @click="choose('.')">.</li>
          <li @click="choose('0')">0</li>
          <li @click="cancel">x</li>
          <li class="finish" @click="finish">完成</li>
        </ul>
      </view>
    </view>







  </view>
</template>

<script>

import SvgIcon from "@/pages/svg-icon.vue";
import AccountChooser from "@/pages/bookkeeping/account-chooser.vue";
import {mapState} from "vuex";

export default {
  components: {SvgIcon,AccountChooser},
  data() {
    return {
      initValue:true,
      value:'0.00',
      remark:'',

    }
  },
  props: {},
  methods: {
    chooseAccount(){
      console.log("chooseAccount in button-group")
      this.$emit('choose-account');

    },
    init(){
      this.initValue = true;

    },
    today(){
      this.$modal.showToast('日历模块建设中~')
    },
    choose(value){
      if(this.initValue){
        this.value = value;
        this.initValue = false
      }else{
        this.value = this.value + value
      }
    },
    cancel(){
      if(this.initValue){
        return
      }
      if(this.value.length > 1){
        this.value = this.value.substring(0, this.value.length - 1);
      }else{
        this.initValue = true
        this.value = '0'
      }

    },
    getNowDate(){
      // 创建一个新的Date对象，它将自动设置为当前日期和时间
      const today = new Date();

      // 获取年、月、日
      const year = today.getFullYear(); // 获取四位年份
      const month = today.getMonth() + 1; // getMonth() 返回0-11，所以需要+1
      const day = today.getDate(); // 获取日期

      // 将月份和日期转换为两位数格式
      const formattedMonth = month < 10 ? `0${month}` : month;
      const formattedDay = day < 10 ? `0${day}` : day;

      // 创建格式化的日期字符串
      const formattedDate = `${year}-${formattedMonth}-${formattedDay}`;

      return formattedDate

    },
    finish(){
      let item = {
        type:this.$store.state.type.chooseType.id,
        label:'',//目前还不支持选标签
        value:this.value,
        day:this.getNowDate(),//目前还不支持时间参数，就只能是当天
        desc:this.remark,

      }
      console.log("item", item)
      this.$modal.showToast('完成模块建设中~')
    },
  },
  onLoad(event) {

  }
}
</script>
<style scoped>
.button-group-container {
  width: 100vw;
  background: white;


}

.account-chooser{
  position: relative;
}
.account-chooser::after{
  content: "";
  width: 7px !important;
  height: 7px !important;
  border-top: 1px solid #aaa;
  border-right: 1px solid #aaa;
  transform: rotate(135deg);
  position: absolute;
  top:4px;
  right: -16px;
  //left: 2px;

}
.group-header {
  display: flex;
  flex-direction: column;
  height: 301px;

  border-top: 1px solid #eee;
  box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.2); /* 垂直偏移值为负值 */
}


.account-and-value-item {
  height: 40px;
  display: flex;
  flex-direction: row;
  background: white;
  justify-content: space-between;
  align-items: center;


}

.account-item {
  display: flex;
  flex-direction: row;
  margin: 0 12px;
  align-items: center;
}
.account-item span{
  margin-left: 4px;
}
.right-arrow{



}
.value-item{
  margin: 0 16px;
  font-size: 24px;
}

.comment-item {

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  background: rgb(246,247,247);
  border-radius: 24px;
  margin: 0 12px 12px 12px;


}
.comment-input-box{
  display: flex;
  flex-direction: row;
  flex: 1;
}
.comment-input{
  flex: 1;
  margin-left: 10px;
  color: #000;
  height: 20px;
  line-height: 20px;
  outline: none;
}
.comment-input::selection{
  background-color: transparent;
  color: transparent;

}
.comment-item span:first-child{
  margin-left: 12px;
}
.comment-icon{
  display: flex;
  flex-direction: row;
}

.comment-icon view{
  margin-right: 4px;
}
.calculator-container {
  //background: red;
  //displaycomment-item: flex;
  //flex-direction: row;
  //flex-wrap: wrap;

}
.calculator-container ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

}
.calculator-container ul li{
  flex: 24%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgb(244,244,244);

}
.finish{
  background: pink;

}
.big{
  font-size: 21px;

}
</style>